import React, { useEffect, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import axios from 'axios'
import styles from './item.module.css'
const Item = () => {
    const navigate =useNavigate()
    const [music,setMusic] =useState([])
    const [query] =useSearchParams()
    const keya =query.get("keya")
    const toggle=(id)=>{
        navigate(`/musdetail/${id}`)
    }
    useEffect(()=>{
        axios.get(`http://122.112.161.135:3000/${keya}`).then(res=>{
            if(res.data.playlists){
                setMusic(res.data.playlists)
            }else if(res.data.albums){
                setMusic(res.data.albums)
            }else if(res.data.result){
                setMusic(res.data.result)
            }
        },[])
       
    })
    return (
        <div className={styles.defs}>
           {music.map(item=>{
                return (<div onClick={()=>toggle(item.id)} className={styles.unert} key={item.id}>
                    <div >
                    <img className={styles.picee}  src={item.picUrl ? item.picUrl:item.coverImgUrl} alt="" />
                    <p>{item.name}</p>
                    </div>
                </div>)
           })}
        </div>
    );
}

export default Item;
